<template>
	<div>
	  <el-button type="primary" @click="addActivityDialogVisible = true">
		签到表设计
		<el-icon style="margin-left: 10px;">
		  <CirclePlusFilled />
		</el-icon>
	  </el-button>
  
	  <!-- 设计弹窗 -->
	  <el-dialog
		title="签到表设计"
		v-model="addActivityDialogVisible"
		width="25%"
		top="13vh"
		:before-close="handleDialogClose">
		
		<el-form
		  :model="formData"
		  :rules="rules"
		  ref="activityForm"
		  label-width="120px">
		  <el-form-item label="活动名称" prop="aname">
			<el-input v-model="formData.aname"></el-input>
		  </el-form-item>
  
		  <el-form-item label="活动主类型" prop="type">
			<el-select v-model="formData.type" placeholder="请选择主类型" @change="updateSubTypes">
			  <el-option label="创造能力" value="创造能力"></el-option>
			  <el-option label="文体能力" value="文体能力"></el-option>
			  <el-option label="社会实践能力" value="社会实践能力"></el-option>
			</el-select>
		  </el-form-item>
		  <el-form-item label="活动副类型" prop="types">
			<el-select v-model="formData.types" :placeholder="subTypesPlaceholder" :disabled="!subTypes || subTypes.length === 0">
			  <el-option v-for="(option, index) in subTypes" :key="index" :label="option" :value="option"></el-option>
			</el-select>
		  </el-form-item>

		  <el-form-item label="活动时间" prop="date">
					<el-date-picker
							v-model="formData.date"
							type="datetime"
							placeholder="选择活动时间"
							clearable="clearable"
							style="width: 100%;"
					></el-date-picker>
		 </el-form-item>
  
		  <br><hr><br>
		  <el-form-item label="学生学号" prop="sid">
			<el-input v-model="formData.sid" :disabled="true" placeholder="固定收集项无需填写"></el-input>
		  </el-form-item>
		  <el-form-item label="学生姓名" prop="sname">
			<el-input v-model="formData.sname" :disabled="true" placeholder="固定收集项无需填写"></el-input>
		  </el-form-item>
		  <el-form-item label="学生班级" prop="sclass">
			<el-input v-model="formData.sclass" :disabled="true" placeholder="固定收集项无需填写"></el-input>
		  </el-form-item>
		  <br><hr>
  
		  <!-- 自定义信息项 -->
		  <div v-for="(item, index) in customItems" :key="index">
			<el-form-item :label="item.label" :prop="`customItem${index + 1}`">
			  <el-input v-model="item.value" ></el-input>
			</el-form-item>
		  </div>
  
		  <div class="button-group">
			<el-form-item>
			  <!-- 删除最后一个自定义信息项按钮 -->
			  <el-button  v-if="customItems.length > 0" type="info" @click="removeLastCustomItem" >
				<el-icon>
				  <SemiSelect />
				</el-icon>
			  </el-button>
  
			  <!-- 添加自定义信息项按钮 -->
			  <el-button type="info" @click="addCustomItem" :disabled="customItems.length >= 5">
				自定义信息收集项
				<el-icon style="margin-left: 10px;">
				  <CirclePlusFilled />
				</el-icon>
			  </el-button>
			</el-form-item>
		  </div>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
			<el-button @click="handleDialogClose">取消</el-button>
			<el-button type="primary" @click="submitForm">提交</el-button>
			</span>
	  	</template>
	  </el-dialog>
	</div>
  </template>



  
  <script>
import AxiosService from '@/plugins/Axios.js';
import { ElMessage } from 'element-plus';
import { CirclePlusFilled, SemiSelect } from '@element-plus/icons-vue';
import { useStore } from 'vuex';

export default {
  components: {
    CirclePlusFilled,
    SemiSelect
  },
  data() {
    const store = useStore(); // 使用 useStore 定义 store
    return {
      addActivityDialogVisible: false,
      formData: {
        aid: '',
        aname: '',
        did: '',
        sid: '',
        sname: '',
        type: '',
        types: '',
        date: '',
        sclass: '',
        remessage1: '',
        remessage2: '',
        remessage3: '',
        remessage4: '',
        remessage5: '',
      },
      rules: {
        aname: [{
          required: true,
          message: '活动名不能为空',
          trigger: 'blur' //失去焦点时进行验证
        }],
        type: [{
          required: true,
          message: '请选择活动主类型',
          trigger: 'change' //值发生变化时进行验证
        }],
        types: [{
          required: true,
          message: '请选择活动副类型',
          trigger: 'change'
        }],
        date: [{
          required: true,
        }],
      },
      customItems: [], // 新增的自定义信息项数组
      activitiesIDs: [],
      activities: '',
      loading: false,
      originalAid: '',
      selectedActivity: '',
      subTypes: null, // 存储副类型的选项
      subTypesPlaceholder: '请选择副查询类型', // 下拉框的占位符
      store: store, // 将 store 作为 data 函数的一部分返回
    };
  },
  methods: {
    handleDialogClose() {
      this.handleReset('activityForm');
    },
    handleReset() {
      this.addActivityDialogVisible = false
      this.editStatus = false
      this.formData = Object.assign({}, {
        aid: '',
        aname: '',
        type: '',
        types: '',
        date: '',
        did: '',
        stu: '',
        sclass: '',
        remessage1: '',
        remessage2: '',
        remessage3: '',
        remessage4: '',
        remessage5: '',
      });
      this.customItems = []; // 清空自定义信息项
      this.subTypes = null; // 清空副类型的选项
    },
    addCustomItem() {
      // 添加新的自定义信息项，但不超过五个
      const newItem = {
        label: `自定义信息${this.customItems.length + 1}`,
        value: ''
      };
      this.customItems.push(newItem);
      if (this.customItems.length == 5) {
        // 显示提示信息
        this.$message({
          message: '最多只能添加五个自定义信息项。',
          type: 'warning'
        });
      }
    },
    removeLastCustomItem() {
      // 删除最后一个自定义信息项
      if (this.customItems.length > 0) {
        this.customItems.pop();
      }
    },
    updateSubTypes() {
      // 更新副类型的选项列表
      switch (this.formData.type) {
        case '创造能力':
          this.subTypes = ['学科竞赛', '校科研项目', '报刊投稿录用', '其它项'];
          break;
        case '文体能力':
          this.subTypes = ['体育竞赛', '文艺竞赛', '校内外各种艺术比赛', '其它项'];
          break;
        case '社会实践能力':
          this.subTypes = ['公益事业', '参加三下乡', '校系组织的讲座', '网络平台参与比赛', '其他项', '其它项'];
          break;
        default:
          this.subTypes = [];
      }
    },
    async submitForm() {
      try {
        const formData = this.formData;
        const did = this.store.getters.CurrentUser.did; 
        console.log("新增，当前did:" + did);
        const Pbactivity = {
          aname: formData.aname,
          atype: formData.type,
          types: formData.types,
          atime: formData.date,
          did: did,
          sname: formData.sname,
          sclass: formData.sclass,
          message1: this.customItems[0]?.value,
          message2: this.customItems[1]?.value,
          message3: this.customItems[2]?.value,
          message4: this.customItems[3]?.value,
          message5: this.customItems[4]?.value
        };

        console.log("签到表设计数据:" + Pbactivity);
        const response = await AxiosService.addActivity(Pbactivity);
        if (response.code === 0) {
          ElMessage.success('签到表添加成功！');
          this.handleReset(); // 重置表单
        }
      } catch (error) {
        console.error(error);
        ElMessage.error('签到表添加失败，请检查您的输入！');
      }
    },
  },
  created() {
    // 初始化时设置默认的副类型选项
    this.updateSubTypes();
  },
};
  </script>

<style scoped>
.button-group {
  display: flex;
  justify-content: space-between;
}

.button-group .el-button--text {
  margin-right: 10px;
}
</style>

